<template>
  <view class="adopt-wrapper flex flex-y">
    <view class="space-between align-center">
      <view class="flex-1 title">我云认养的猫咪</view>
      <view
        class="flex cloud-record"
        @click="toRecord"
      >
        认养记录
        <u-icon
          name="arrow-right"
          size="24rpx"
          color="#afafaf"
        ></u-icon>
      </view>
    </view>
    <view
      v-if="adoptCatList.length === 0 || !isLogin"
      class="no-cat"
    >
      您还没有云认养的猫咪哦~
    </view>
    <scroll-view
      v-if="adoptCatList.length > 0"
      :scroll-x="true"
      class="sv-cat-list"
    >
      <block
        v-for="item in adoptCatList"
        :key="item.id"
      >
        <view
          class="adopt-cat-item"
          @click="petDetail(item)"
        >
          <u--image
            v-if="item.status === CLOUD_ADPOT_STATUS.NORMAL"
            src="/static/mine/icon_cloud_adopt_bg.png"
            width="248rpx"
            height="260rpx"
          ></u--image>
          <view class="adopt-cat-item-content flex flex-center flex-y">
            <u--image
              :src="item.petAvatar"
              width="96rpx"
              height="96rpx"
              radius="16rpx"
            ></u--image>
            <text
              class="cat-name u-line-1"
              :class="{ maturity: item.status !== CLOUD_ADPOT_STATUS.NORMAL }"
            >
              {{ subStringName(item.petName) }}
            </text>
            <view
              class="expried-time u-line-1"
              :class="{ maturity: item.status !== CLOUD_ADPOT_STATUS.NORMAL }"
            >
              <view
                v-if="item.status === CLOUD_ADPOT_STATUS.NORMAL"
                class="flex align-center"
              >
                <text
                  mode="date"
                  color="#333333"
                  size="22rpx"
                >
                  {{ $moment(item.endTime).format('YYYY-MM-DD') }}
                </text>
                到期
              </view>
              <text v-else>已到期</text>
            </view>
            <view
              v-if="item.renewStatus"
              class="renewal flex align-center"
              :class="{
                'renewal-agin': item.status !== CLOUD_ADPOT_STATUS.NORMAL,
              }"
              @click.stop="renewal(item)"
            >
              {{
                item.status === CLOUD_ADPOT_STATUS.NORMAL
                  ? '立即续费'
                  : '再次云认养'
              }}
              <u-icon
                name="arrow-right"
                size="20rpx"
                :color="
                  item.status === CLOUD_ADPOT_STATUS.NORMAL
                    ? '#47B81A'
                    : '#333333'
                "
              ></u-icon>
            </view>
          </view>
        </view>
      </block>
    </scroll-view>
    <recommedCloudPetDialog
      v-model="recommedVisible"
      :recommed-info="recommedInfo"
      :pet-name="petItem.petName"
    ></recommedCloudPetDialog>
    <u-modal
      :show="showPrompt"
      title="提示"
      :content="promptContent"
      confirm-text="我知道了"
      @confirm="confirm"
    ></u-modal>
    <cloudAdoptDialog
      v-model="cloudAdoptVisivle"
      :step="step"
      :pet-info="petInfo"
      :is-mine-page="true"
      @paySuccess="paySuccess"
    ></cloudAdoptDialog>
    <cloudAdoptCertDialog
      v-model="showCert"
      :order-sn="orderSn"
    ></cloudAdoptCertDialog>
    <maya-login-btn ref="loginBtn">
      <template #button></template>
    </maya-login-btn>
  </view>
</template>

<script>
import { subStringName, navigateToWebView } from '@/utils/tools.js';
import { myAdoptRecordUrl } from '@/const/webPageUrl.js';
import { ttPay, startPay } from '@/utils/pay.js';
import mayaLoginBtn from '@/components/maya-login-btn.vue';
import {
  CLOUD_ADPOT_STATUS,
  CHECK_CLOUD_ADOPT_STATUS,
  WEB_VIEW_TYPE,
  TT_PAY_STATUS,
} from '@/const/index.js';
import { checkCloudPetRenew, getTiktokPayParamOfPet } from '@/api/pet-core.js';
import recommedCloudPetDialog from '@/components/cloudAdopt/recommedCloudPetDialog.vue';
import cloudAdoptDialog from '@/components/cloudAdopt/cloudAdoptDialog.vue';
import cloudAdoptCertDialog from '@/components/cloudAdopt/cloudAdoptCertDialog.vue';
import { mapGetters } from 'vuex';

export default {
  components: {
    recommedCloudPetDialog,
    cloudAdoptDialog,
    cloudAdoptCertDialog,
    mayaLoginBtn,
  },
  props: {
    adoptCatList: {
      type: Array,
      value: [],
    },
  },
  data() {
    return {
      subStringName,
      myAdoptRecordUrl,
      CLOUD_ADPOT_STATUS,
      CHECK_CLOUD_ADOPT_STATUS,
      WEB_VIEW_TYPE,
      TT_PAY_STATUS,
      recommedVisible: false,
      cloudAdoptVisivle: false,
      recommedInfo: {},
      petItem: {},
      showPrompt: false,
      promptContent: '',
      petInfo: {},
      step: 0,
      showCert: false,
      orderSn: '',
    };
  },
  computed: {
    ...mapGetters(['isLogin']),
  },
  methods: {
    toRecord() {
      if (!this.isLogin) {
        this.$refs.loginBtn.getMpUserInfo();
        return;
      }
      navigateToWebView({
        url: myAdoptRecordUrl,
        type: WEB_VIEW_TYPE.PET,
        title: '认养记录',
      });
    },
    confirm() {
      this.showPrompt = false;
    },
    petDetail(item) {
      uni.navigateTo({
        url: `/pages/detail/index?id=${item.petId}`,
      });
    },
    paySuccess(data) {
      const that = this;
      this.orderSn = data;
      this.$emit('refreshAdopt', this.petInfo);
      setTimeout(() => {
        that.showCert = true;
      }, 200);
    },
    renewal(item) {
      const that = this;
      that.petInfo = {
        petId: item.petId,
        petName: item.petName,
        petAvatar: item.petAvatar,
        startTime:
          item.status === CLOUD_ADPOT_STATUS.NORMAL ? item.endTime : '',
      };
      that.petItem = item;
      if (CLOUD_ADPOT_STATUS.NORMAL === item.status) {
        that.petInfo.checkType = '2';
        this.cloudAdoptVisivle = true;
        this.step = '1';
      } else if (
        CLOUD_ADPOT_STATUS.EXPIRED === item.status ||
        CLOUD_ADPOT_STATUS.TERMINATED === item.status
      ) {
        checkCloudPetRenew(item.petId).then((res) => {
          if (res.code === 0) {
            const code = res.data.code;

            const petStatus = res.data.petStatus;
            if (petStatus === CHECK_CLOUD_ADOPT_STATUS.AWAIT_ADOPTION) {
              if (code === '0') {
                that.showPrompt = true;
                that.promptContent =
                  '非常抱歉，有位小主刚刚下单了，但是他还没有付款呢，若他放弃云认养我，您可以稍后再来试试哦！';
              } else if (code === '3') {
                that.showPrompt = true;
                that.promptContent =
                  '小猫咪已被爱心人士预约领养，马上要去新家啦！\n你可以在首页看看其他小猫咪哦';
              } else if (code === '1' && res.data.sn) {
                that.orderSn = res.data.sn;

                if (res.data.tikTokOrderId) {
                  startPay(res.data.tikTokOrderId, that.orderSn).then(
                    (payRes) => {
                      if (res.code === TT_PAY_STATUS.SUCCESS) {
                        uni.$emit('adoptSuccess');
                        that.paySuccess(that.orderSn);
                      } else {
                        uni.showToast({
                          title: payRes.msg,
                          icon: 'none',
                        });
                      }
                    }
                  );
                } else {
                  getTiktokPayParamOfPet(res.data.sn).then((payRes) => {
                    ttPay(
                      that.orderSn,
                      payRes.data.data,
                      payRes.data.token
                    ).then((res) => {
                      if (res.code === TT_PAY_STATUS.SUCCESS) {
                        uni.$emit('adoptSuccess');
                        that.paySuccess(that.orderSn);
                      } else {
                        uni.showToast({
                          title: payRes.msg,
                          icon: 'none',
                        });
                      }
                    });
                  });
                }

                // that.showPrompt = true;
                // that.promptContent =
                //   '小猫咪已被爱心人士预约领养，马上要去新家啦！\n你可以在首页看看其他小猫咪哦';
              } else if (code === '2') {
                that.petInfo.checkType = '1';
                that.cloudAdoptVisivle = true;
                that.step = '0';
              } else {
                uni.showToast({
                  title: '网络异常，请稍后再试',
                  icon: 'none',
                });
              }
            } else if (
              (res.data.petStatus === CHECK_CLOUD_ADOPT_STATUS.ADOPTED ||
                res.data.petStatus === CHECK_CLOUD_ADOPT_STATUS.RETURN_STAR ||
                res.data.petStatus === CHECK_CLOUD_ADOPT_STATUS.CLOUD_ADOPT) &&
              res.data.petList.length > 0
            ) {
              that.recommedInfo = res.data;
              that.recommedVisible = true;
            }
          }
        });
      }
    },
  },
};
</script>

<style lang="scss">
.adopt-wrapper {
  background-color: #ffffff;
  border-radius: 24rpx;
  padding: 24rpx;
  margin-top: 24rpx;
  .title {
    font-weight: 600;
    font-size: 28rpx;
    color: #333333;
  }
  .cloud-record {
    font-weight: 400;
    font-size: 24rpx;
    color: #afafaf;
    line-height: 24rpx;
  }
  .no-cat {
    height: 200rpx;
    text-align: center;
    padding-top: 100rpx;
    width: 100%;
    color: #666666;
    font-size: 24rpx;
  }
  .sv-cat-list {
    white-space: nowrap;
    width: 100%;
    margin-top: 24rpx;
    .adopt-cat-item {
      width: 248rpx;
      height: 260rpx;

      display: inline-flex;
      background-color: #f6f6f8;
      border-radius: 18rpx;
      margin-right: 24rpx;
      position: relative;
      .adopt-cat-item-content {
        position: absolute;
        margin-top: 24rpx;
        width: 100%;

        .cat-name {
          font-weight: 500;
          font-size: 28rpx;
          color: #333333;
          margin-top: 8rpx;
        }
        .maturity {
          color: #666666;
        }
        .expried-time {
          font-weight: 400;
          font-size: 20rpx;
          color: #333333;
          margin-top: 8rpx;
        }

        .renewal {
          font-size: 20rpx;
          color: #47b81a;
          padding: 15rpx;
        }
        .renewal-agin {
          color: #333333;
        }
      }
    }
  }
}
</style>
